<template>
  <div class="sidebar">
    <el-menu
        class="sidebar-el-menu"
        :default-active="onRoutes"
        :collapse="collapse"
        background-color="#324157"
        text-color="#bfcbd9"
        active-text-color="#20a0ff"
        unique-opened
        router
    >
      <template v-for="item in items">
        <template v-if="item.subTitle">
          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <i :class="item.icon"/>
              <span slot="title">{{ item.title }}</span>
            </template>



            <template v-for="subItem in item.subTitle">
              <el-submenu
                  v-if="subItem.subs"
                  :index="subItem.index"
                  :key="subItem.index"
              >
                <template slot="title">{{ subItem.title }}</template>
                <el-menu-item
                    v-for="(threeItem,i) in subItem.subs"
                    :key="i"
                    :index="threeItem.index"
                >{{ threeItem.title }}
                </el-menu-item>
              </el-submenu>
              <el-menu-item
                  v-else
                  :index="subItem.index"
                  :key="subItem.index"
              >{{ subItem.title }}
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"/>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
  import bus from '../common/bus';

  export default {
    data() {
      return {
        collapse: false,
        items: [
          {
            icon: 'el-icon-lx-home',
            index: 'dashboard',
            title: '系统首页',
            subTitle:[]
          },
          {
            icon: 'el-icon-lx-cascades',
            index: 'table',
            title: '信息管理',
            subTitle:[
              {
                "icon": 'el-icon-lx-home',
                "index": 'userManage',
                "title": '用户管理'
              },
              {
                "icon": 'el-icon-lx-home',
                "index": 'collegeManage',
                "title": '学院管理'
              },
              {
                "icon": 'el-icon-lx-home',
                "index": 'deptManage',
                "title": '党支部管理'
              }
            ]
          },
          {
            icon: 'el-icon-user-solid',
            index: 'managerManage',
            title: '管理员管理',
          },
          {
            icon: 'el-icon-lx-text',
            index: 'paperManage',
            title: '卷库管理',
            subTitle:[
              {
                icon: 'el-icon-lx-edit',
                index: 'paperCreate',
                title: '试卷创编',
              },
              {
                icon: 'el-icon-lx-edit',
                index: 'RandomPaper',
                title: '随机试卷',
              }
            ]
          },
          {
            icon: 'el-icon-lx-edit',
            index: 'examManage',
            title: '考试管理',
            subTitle:[
              {
                icon: 'el-icon-lx-edit',
                index: 'examList',
                title: '考试列表',
              },
/*              {
                icon: 'el-icon-lx-edit',
                index: 'correctList',
                title: '批改列表',
              }*/
            ]
          },
          {
            icon: 'el-icon-lx-file',
            index: 'questionManage',
            title: '题库管理',
            subTitle:[
              {
                icon: 'el-icon-lx-file',
                index: 'questionList',
                title: '题库管理',
              },
              {
                icon: 'el-icon-lx-file',
                index: 'singleCreate',
                title: '单选题创编',
              },
              {
                icon: 'el-icon-lx-file',
                index: 'multipleCreate',
                title: '多选题创编',
              },
              {
                icon: 'el-icon-lx-file',
                index: 'judgeCreate',
                title: '判断题创编',
              },
              {
                icon: 'el-icon-lx-file',
                index: 'fillCreate',
                title: '填空题创编',
              },
              {
                icon: 'el-icon-lx-file',
                index: 'shotAnswerCreate',
                title: '简答题创编',
              },
            ]
          }
          // {
          //   icon: 'el-icon-lx-warn',
          //   index: '404',
          //   title: '404页面'
          // }
        ]
      };
    },

    computed: {
      onRoutes() {
        return this.$route.path.replace('/', '');
      }
    },
    created() {
      // 通过 Event Bus 进行组件间通信，来折叠侧边栏
      bus.$on('collapse', msg => {
        this.collapse = msg;
        bus.$emit('collapse-content', msg);
      });
    }
  };
</script>

<style scoped>
  .sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
  }

  .sidebar::-webkit-scrollbar {
    width: 0;
  }

  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
  }

  .sidebar > ul {
    height: 100%;
  }
</style>
